<template>
  <div class="app-container">
    <TheQueryForm :option="searchOption" @onSubmit="onSubmit" @onClear="onClear"></TheQueryForm>
    <el-row style="margin-bottom: 20px">
      <el-col :span="24" style="display: flex; justify-content: flex-end">
        <el-button type="primary" size="small" @click="handleExport">导出Excel</el-button>
      </el-col>
    </el-row>
    <TheTable
      :tableOption="tableOption"
      :pageNo.sync="pageNo"
      :limit.sync="limit"
      :api="queryPageApi"
      :queryParams="queryParams"
    />
  </div>
</template>
<script>
import {
  apiOrderSettlementListByPlatformMerchant,
  apiOrderSettlementExportByPlatformMerchant
} from "@/api/statements.js";
import { apiMerchantPage } from "@/api/storeManager.js";
import { Link } from "element-ui";
export default {
  data() {
    const _this = this;
    return {
      queryPageApi: apiOrderSettlementListByPlatformMerchant,
      queryParams: {},
      pageNo: 1,
      limit: 10,
      exportLoading: false,
      searchOption: [
        {
          field: "settlementFlowId",
          label: "结算id",
          placeholder: "结算id",
          type: "Input"
        },
        {
          field: "merchantName",
          label: "商家名称",
          placeholder: "商家名称",
          type: "Select",
          api: apiMerchantPage,
          params: { pageNum: 1, pageSize: -1 },
          options: [],
          optionsKey: "merchantName",
          optionsValue: "merchantName"
        },

        {
          type: "Select",
          field: "settleType",
          label: "类型",
          placeholder: "类型",
          options: [
            { label: "扣减余额", value: "DECREASE" },
            { label: "增加余额", value: "INCREASE" }
          ]
        },
        {
          type: "DatePickerRange",
          field: "time",
          label: "发起结算时间",
          placeholder: "发起结算时间"
        }
      ],
      tableOption: [
        {
          label: "结算id",
          prop: "settlementFlowId",
          width: 120
        },
        {
          label: "关联订单id",
          prop: "orderId",
          width: 120,
          render(h, { row }) {
            return h("div", [
              h("el-link", {
                domProps: {
                  innerHTML: row.orderId
                },
                props: {
                  type: "primary"
                },
                on: {
                  click() {
                    _this.$router.push({
                      path: "/order/platformDetail",
                      query: {
                        serviceOrderId: row.orderId
                      }
                    });
                  }
                }
              })
            ]);
          }
        },
        {
          label: "发包商名称",
          prop: "merchantName",
          width: 100
        },
        {
          label: "服务项目",
          prop: "serviceItems",
          width: 100,
          formatter({ serviceItems }) {
            return this.$filters.filterServiceCategoryTypeEnum(serviceItems);
          }
        },
        {
          label: "结算类型",
          prop: "settleType",
          width: 100,
          formatter({ settleType }) {
            return this.$filters.filterSettleType(settleType);
          }
        },
        {
          label: "结算金额",
          prop: "settlementAmount",
          width: 80,
          formatter({ settlementAmount }) {
            return this.$filters.filterPriceFormat(settlementAmount);
          }
        },
        {
          label: "原因",
          prop: "reason",
          width: 80,
          formatter({ reason }) {
            return this.$filters.filterWaterComeInType(reason);
          }
        },
        {
          label: "结算状态",
          prop: "settleState",
          width: 100,
          formatter({ settleState }) {
            return this.$filters.filterSettleState(settleState);
          }
        },

        {
          label: "结算发起时间",
          width: 100,
          prop: "settingSettleTime",
          render(createElement, { row }) {
            try {
              const strArr = row.settingSettleTime.split(" ");
              const dom = (
                <div>
                  <div>{strArr[0]}</div>
                  <div>{strArr[1]}</div>
                </div>
              );
              return dom;
            } catch (error) {
              return <div></div>;
            }
          }
        },

        {
          label: "完成结算时间",
          width: 100,
          prop: "finishedSettleTime",
          render(createElement, { row }) {
            try {
              const strArr = row.finishedSettleTime.split(" ");
              const dom = (
                <div>
                  <div>{strArr[0]}</div>
                  <div>{strArr[1]}</div>
                </div>
              );
              return dom;
            } catch (error) {
              return <div></div>;
            }
          }
        }
      ]
    };
  },
  mounted() {},
  methods: {
    onView(row) {
      // this.$router.push({
      //   path: "/receipt/detail",
      //   query: { contractId: row.contractId }
      // });
    },

    // 导出
    async handleExport() {
      this.exportLoading = true;
      const res = await apiOrderSettlementExportByPlatformMerchant({
        ...this.queryParams
      });
      if (res.code === "SUCCESS") {
        let header = [
          {
            title: "结算id",
            prop: "id",
            valueType: "s"
          },
          {
            title: "关联订单id",
            prop: "orderId",
            valueType: "s"
          },
          {
            title: "发包商名称",
            prop: "merchantName",
            valueType: "s"
          },
          {
            title: "服务项目",
            prop: "serviceItems",
            valueType: "s"
          },
          {
            title: "结算类型",
            prop: "settleType",
            valueType: "s"
          },

          {
            title: "结算金额",
            prop: "settlementAmount",
            valueType: "n",
            numFmt: $numFmt.money
          },
          {
            title: "原因",
            prop: "reason", //debtorTime  repaymentTime
            valueType: "s"
          },
          {
            title: "结算状态",
            prop: "settleState",
            valueType: "s"
          },
          { title: "结算发起时间", prop: "settingSettleTime", valueType: "s" },
          { title: "完成结算时间", prop: "finishedSettleTime", valueType: "s" }
        ];

        let dataSource = res.data.map(item => {
          return {
            ...item,
            serviceItems: this.$filters.filterServiceCategoryTypeEnum(
              item.serviceItems
            ),

            settleType: this.$filters.filterSettleType(item.settleType),
            settlementAmount: item.settlementAmount / 100,
            reason: this.$filters.filterWaterComeInType(item.reason),
            settleState: this.$filters.filterSettleState(item.settleState)
          };
        });
        const option = {
          dataSource: dataSource,
          header: header,
          fileName: "发包商结算账单"
        };
        window.$Json2Excel(option);
        this.exportLoading = false;
      } else {
        this.$message({
          message: "导出操作失败,请重试",
          type: "warring"
        });
        this.exportLoading = false;
      }
    },

    onSubmit({ values }) {
      console.log(values);
      if (values.hasOwnProperty("time")) {
        values = {
          ...values,

          createStartTime: values.time ? values.time[0] : "",
          createEndTime: values.time ? values.time[1] : ""
        };
        delete values.time;
      }
      this.queryParams = values;
    },
    onClear() {
      this.queryParams = {};
    }
  }
};
</script>
<style scoped lang="scss">
::v-deep .row {
  display: flex;
  .span4 {
    flex: 1;
  }
  .span20 {
    flex: 5;
  }
}
</style>
